<template>
  <div>
    <template v-if="menus.length==0">
      <a-empty />
    </template>
    <el-tree
      :data="menus"
      :show-checkbox="checkable"
      node-key="id"
      :default-checked-keys="selMenus" 
      @check="onCheck"
      @node-click="onSelect"
      default-expand-all
    >
    </el-tree>
  </div>
</template>

<script>
import { menu } from "@/views/menu/api";
export default {
  props: ["checkable","expandAll","oldKeys"],
  data() {
    return {
      menus: [],
      selMenus:[]
    };
  },
  mounted(){
  },
  methods: {
    menuTree() {
      this.menus = []
      this.selMenus = []
      menu().then(v => {
        if (v.ok) {
          v.data.forEach(el=>{
            this.menus.push(this.buildMenu(el))
          })

        } else {
          this.$message.error(v.msg || "获取菜单树失败");
        }
      }).finally(()=>{
        this.selMenus = this.oldKeys
      });
    },
    buildMenu(itemMenu){
       const obj = {}
       obj.id = itemMenu.id
       obj.label=itemMenu.nameZh
       obj.children=[]
       itemMenu.childrens.forEach(element => {
         obj.children.push(this.buildMenu(element))
       });
       return obj
    },
    onSelect(keys){
        this.$emit('selectTreeNode',keys.id,null)
    },
    onCheck(currentNode,checkedNodes){
       this.$emit('checkTreeNode',checkedNodes.checkedKeys,null)
    }
  }
};
</script>

<style>
</style>